<template>
  <div class="public_main">
    <div class="public_body">
      <Header activeIndex="home"></Header>
      <div class="home_body">
        <div class="public_section">
          <div class="home_head">
            <div class="home_headline_cn"><span>智能</span>科研助手！</div>
            <div class="home_headline_us">The best way to search is to ask a question.</div>
          </div>
          <div class="home_search_section">
            <div class="home_search">
              <el-input type="textarea" :rows="7" resize="none" placeholder="请输入想要检索的问题" v-model="content"> </el-input>
              <div class="home_search_btn">
                <el-button type="success" size="large" round @click="handleRedirect(content)">
                  提问
                  <el-icon>
                    <i-ep-promotion></i-ep-promotion>
                  </el-icon>
                </el-button>
              </div>
            </div>
            <div class="home_search_tips">
              <template v-for="item in questions">
                <el-link @click="handleRedirect(item)"> {{ item }}</el-link>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { addDialogue, saveRightDialogueRecord } from "@/hooks/ai-dialogue";

const router = useRouter();

// 输入框内容
let content = ref("");
// 静态问题
const questions = [
  "我该如何进行数据分析？",
  "你能帮助我理解我的数据吗？",
  "能否给我提供一些数据分析的案例？",
  "如何通过数据分析来提高医疗保健的效率和质量？",
  "如何通过数据分析来预测疾病？"
];
// 跳转检索页
const handleRedirect = (item) => {
  if (item.trim() === "") {
    return ElMessage.warning("请输入检索内容");
  }
  // 跳转前先创建会话并切换至新建会话
  addDialogue({ title: item });
  setTimeout(() => {
    // 缓存问题
    saveRightDialogueRecord(item);
    router.push({ path: "/chat", query: { q: item.trim() } });
  }, 50);
};
</script>
<style lang="scss" scoped>
:deep(.public_body) {
  background-image: url("@/assets/images/home_bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  padding-bottom: 0;
  margin-bottom: 0;

  .home_body {
    padding-top: 165px;

    .home_head {
      margin-bottom: 60px;

      .home_headline_cn {
        font-family: SourceHanSansSC-Heavy;
        font-size: 46px;
        font-weight: 600;
        color: #2d3f4a;
        line-height: 50px;
        text-align: center;
        margin-bottom: 25px;

        span {
          color: #22aa8c;
          display: inline-block;
        }
      }

      .home_headline_us {
        font-size: 20px;
        line-height: 30px;
        color: #707070;
        text-align: center;
      }
    }

    .home_search_section {
      width: 982px;
      margin: 0 auto;

      .home_search {
        margin-bottom: 25px;
        border-radius: 10px;
        background-color: #ffffff;
        box-shadow: 0px 0px 5px 0px rgba(29, 168, 178, 0.14);

        .el-textarea {
          .el-textarea__inner {
            padding: 11px 15px;
            box-shadow: none;
          }
        }

        .home_search_btn {
          padding: 10px 25px 15px;
          text-align: right;

          .el-button {
            &.el-button--success {
              --el-button-size: 36px;
              border: none;
              font-size: 16px;
              background-image: linear-gradient(-90deg, #22aaa5 0%, #11a5ce 100%), linear-gradient(43deg, #4f73f2 0%, #7d4ff2 100%);

              i {
                font-size: 18px;
                margin: -2px 0 0 6px;
              }
            }
          }
        }
      }

      .home_search_tips {
        text-align: center;

        a {
          &.el-link {
            color: #22aa8c;
            padding: 9px 35px;
            line-height: 20px;
            display: inline-block;
            vertical-align: top;
            background-color: #ffffff;
            border-radius: 20px;
            margin: 15px 5px;
          }
        }
      }
    }
  }
}
</style>
